<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets">
    <h:head>
        <title>My playlist</title>
    </h:head>
    <h:body>
        <ui:composition template="MasterPage.xhtml">
               <ui:define name="deSlide">
            </ui:define>
            <ui:define name="contents">
                <h:form>
                    <script type="text/javascript">
                        function askAgainDelete(playListName){
                            return confirm('You want delete playlist: ' + playListName + ' ?');
                        }
                    </script>
                    <div class="menuUserPersonal">
                        <a href="UserPersonalPage.xhtml">View Information</a>
                        <a href="#">Update Information</a>
                        <span class="menuUserPersonalActive"><h3 class="DetailsAlbumItmeDataStoreH2">My Playlist</h3></span>
                    </div>
                    <div class="UserPersonalPageContent">
                        <h4 class="UserPersonalPageContentH4">My playlist</h4>
                        <div class="UserPersonalPageContentInfor">
                            <ui:repeat value="#{myPlaylistManager.showCollectionCateById()}" var="listItem">
                                <div class="MyPlaylistPageItem">
                                    <span class="MyPlaylistPageItemSN">#{myPlaylistManager.SNNumber}</span>
                                    <a class="MyPlaylistPageItemName" href="DetailsPlaylistPage.xhtml?PlayListId=#{listItem.collecCateID}">#{listItem.collectCateName}</a>
                                    <h:commandLink onclick="return askAgainDelete('#{listItem.collectCateName}');" class="MyPlaylistPageItemDelete" action="#{myPlaylistManager.deleteCollectionCate(listItem.collecCateID, listItem.collectCateName)}" value="Delete"></h:commandLink>
                                    <a class="MyPlaylistPageItemPlay" href="playVideoMusic.xhtml?PlayListId=#{listItem.collecCateID}">Play</a>
                                </div>
                            </ui:repeat>
                        </div>
                    </div>
                </h:form>
            </ui:define>
        </ui:composition>
    </h:body>
</html>

